<script setup lang="ts">
import { type PropType, ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
const props = defineProps({
    data: {
        type: Object,
        default: () => []
    },
    dataList: {
        type: Object,
        default: () => []
    },
    legendList: {
        type: Object,
        default: () => []
    }
});
// const legendList = ref(['真实', '误报', '忽略'])
const getData = () => {
    let res = []
    props.dataList?.data?.forEach(item => {
        res.push(
            {
                data: item.value,
                name: item.name,
                type: 'bar',
                stack: 'Ad',
                barWidth: 10,
                itemStyle: {
                    color: item.color
                },


            }
        )


    })
    return res
}
const getxAxis = () => {
    let res = []
    props.dataList?.xAxis?.forEach(item => {
        res.push(item)
    })
    return res
}
const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
    renderer: "svg"
});
watch(() => props, () => {
    // console.log("获取告警分析", props);
    nextTick(() => {
        setOptions({
            container: "#screen",
            legend: {
                data: props.legendList,
                left: '0',
                top: '4px',
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    color: '#fff',
                    fontSize: 14,

                }

            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: "none"
                }
            },
            xAxis: {
                type: 'category',
                data: getxAxis(),
                nameLocation: 'start'
            },


            yAxis: {
                show: false,
                type: 'value',
                splitLine: {   //去除网格线
                    show: false,
                }
            },
            grid: props.data,

            series: getData()

        });
    })
}, {
    immediate: true,
    deep: true
})
</script>
<template>
    <!--    <div ref="chartRef" style="width: 100%;" :style="{ height: props.data[1]?.height2 }" />-->
    <div ref="chartRef" class="w-full" v-if="props.dataList?.data?.length > 0" />
    <NullPng v-else></NullPng>
</template>
